<template>
    <cus-drawer ref="cusDrawerRef" title="菜肴食材占比配置" @onClose="onClose" :showFooter="true">
        <div class="dishRatioBox" v-for="(item, index) in dishFoodData" :key="index">
            <div class="dishTitle">
                <span>{{ index }}定义:{{ item.remark }}</span>
            </div>
            <div class="dishContent">
                <div class="dishCol">
                    <div class="dishName">{{ index }}</div>
                    <div class="dishName">荤</div>
                    <div class="dishName">素</div>
                    <div class="dishName">人份</div>
                </div>
                <div class="dishCol">
                    <div class="dishName">比例</div>
                    <div class="dishName">
                        <span v-if="!isEdit">{{ item.meatRatio }}</span>
                        <InputNumber v-else v-model="item.meatRatio" :precision="0" :min="0"
                        :active-change="false" style="width:120px" />
                    </div>
                    <div class="dishName">
                        <span v-if="!isEdit">{{ item.vegetablesRatio }}</span>
                        <InputNumber v-else v-model="item.vegetablesRatio" :precision="0" :min="0"
                        :active-change="false" style="width:120px" />
                    </div>
                    <div class="dishName">
                        <span v-if="!isEdit">{{ item.peopleWeight }}</span>
                        <InputNumber v-else v-model="item.peopleWeight" :precision="1" :min="0"
                        :active-change="false" style="width:120px" />
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <Button v-if="!isEdit" type="primary" @click="isEdit = true">编辑</Button>
            <Button v-if="isEdit" class="mr_20" @click="cancelClick">取消</Button>
            <Button v-if="isEdit" type="primary" @click="confirmClick">确认</Button>
        </template>
    </cus-drawer>
</template>
<script>
import { setDishFoodRatio, dishFoodRatio, } from "@/api/organ/dishesModule";
export default {
    data() {
        return {
            isEdit: false,
            dishFoodData: [],
            dishFoodDataCopy: [],
        };
    },
    methods: {
        onShow() {
            this.$refs["cusDrawerRef"].show();
            this.dishFoodRatioApi();
        },
        dishFoodRatioApi() {
            dishFoodRatio().then((res) => {
                if (res.code == 1) {
                    this.dishFoodData = res.data;
                    this.dishFoodDataCopy = JSON.parse(JSON.stringify(res.data));
                }
            })
        },
        // 取消事件回调
        cancelClick() {
            this.isEdit = false;
            this.dishFoodData = JSON.parse(JSON.stringify(this.dishFoodDataCopy));
        },
        // 编辑事件回调
        confirmClick() {
            console.log('res', this.dishFoodData);
            setDishFoodRatio(this.dishFoodData).then((res) => {
                if (res.code == 1) {
                    this.isEdit = false;
                    this.dishFoodRatioApi();
                }
            });
        },
        onClose() {
            this.isEdit = false;
            this.dishFoodData = [];
            this.dishFoodDataCopy = [];
        },
    },
}
</script>
<style lang="scss" scoped>
.dishRatioBox {
  .dishContent {
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 20px;
    .dishCol {
      display: flex;
      align-items: center;

      .dishName {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        line-height: 10px;
        padding: 8px;
        width: 200px;
        text-align: center;
        border-top: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
      }

      .dishName:last-child {
        border-right: 1px solid #ebeef5;
      }
    }

    .dishCol:first-child {
      .dishName {
        border-bottom: none;
      }
    }
  }
}
</style>